<template>
  <div>
    <el-card>
      <div class="card-header">
        <h4>
          <strong>{{ props.title }}</strong>
        </h4>
      </div>
      <div class="card-body">
        <el-table v-loading="loading" :data="nodeList">
          <el-table-column label="序号" width="100" align="center" type="index">
            <template #default="scope">
              {{
                scope.$index + (queryParams.page - 1) * queryParams.limit + 1
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="节点地址"
            align="center"
            prop="address"
            sortable
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="节点名称"
            align="center"
            prop="name"
            sortable
            :show-overflow-tooltip="true"
          />
          <el-table-column label="状态" align="center" prop="status" sortable>
            <template #default="scope">
              <y-dict-tag
                :options="sys_enable_disable"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
        </el-table>

        <!--列表分页-->
        <y-pagination
          class="card-pagination"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup name="NodesCard">
import { listNode } from "@/api/oms/node";

const { proxy } = getCurrentInstance();
const { sys_enable_disable, oms_node_type } = proxy.useDict(
  "sys_enable_disable",
  "oms_node_type"
);

const total = ref(0);
const loading = ref(false);
const nodeList = ref([]);

const props = defineProps({
  title: {
    type: String,
    default: "环境信息",
  },
  env: {
    type: String,
    default: undefined,
  },
});

const data = reactive({
  queryParams: {
    env: props.env,
    page: 1,
    limit: 10,
  },
});

const { queryParams } = toRefs(data);

/** 查询列表 */
function getList() {
  loading.value = true;
  listNode(queryParams.value).then((response) => {
    loading.value = false;
    nodeList.value = response.data;
    total.value = response.total;
  });
}
getList();
</script>
